<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生信息列表</title>
    <!-- 引入LayUI CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.10/css/layui.css">
    <style>
        .layui-layout-admin .layui-header {
            background-color: #009688;
        }
        .layui-layout-admin .layui-logo {
            color: #ffffff;
            font-size: 18px;
            font-weight: bold;
        }
        .container {
            width: 80%;
            margin: 20px auto;
            padding: 20px;
        }
        .header {
            text-align: center;
            margin: 20px 0;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 头部区域 -->
    <div class="layui-header">
        <div class="layui-logo">学生管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="/students/list">学生管理</a>
            </li>
            <li class="layui-nav-item">
                <a href="/teachers/list">教师管理</a>
            </li>
        </ul>
    </div>

    <!-- 内容主体区域 -->
    <div class="layui-body" style="top: 60px;">
        <div class="container">
            <div class="header">
                <h1 class="layui-font-black">学生信息列表</h1>
            </div>
        
        <div class="layui-card">
            <div class="layui-card-header">学生数据</div>
            <div class="layui-card-body">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>学号</th>
                            <th>姓名</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="student : ${students}">
                            <td th:text="${student.id}"></td>
                            <td th:text="${student.studentId}"></td>
                            <td th:text="${student.name}"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
    
<!-- 引入LayUI JS -->
<script src="https://cdn.staticfile.org/layui/2.8.10/layui.js"></script>
<script>
    layui.use(['table', 'layer', 'element'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var element = layui.element;
        
        // 初始化效果
        layer.msg('欢迎查看学生信息表');
    });
</script>
</body>
</html>